<template>
  <div class="drag-container">
    <div class="draggable" :class="{ dragging: isDragging }" ref="draggableElement" draggable="true"
      @dragstart="handleDragStart" @dragend="handleDragEnd">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Draggable',
})
</script>
<script lang="ts" setup>
import { ref } from 'vue'
const props = defineProps({
  data: {
    type: Object,
    default: {} as any
  }
})
const draggableElement = ref<HTMLElement | null>(null)
const isDragging = ref(false)
const handleDragStart = (event: DragEvent) => {
  // 设置传输的数据，这里使用 "text/plain" 格式
  console.log(event)
  const transData = {
    comp: props.data,
    offset: {
      x: event.offsetX,
      y: event.offsetY
    }
  }
  console.log("handleDragStart", transData)
  event.dataTransfer?.setData('text/plain', JSON.stringify(transData))

  // 添加正在拖动的样式
  isDragging.value = true
}
const handleDragEnd = () => {
  // 移除正在拖动的样式
  isDragging.value = false
}
</script>